<template>
	<view>
		<view class="content-form">
			<u-form :model="form" ref="uForm" :label-style="labelStyle" label-width="140">
				<u-form-item label="城市" prop="name" right-icon="arrow-right">
					<u-input disabled v-model="form.name" placeholder="请选择"/>
				</u-form-item>
				<u-form-item label="小区名称" prop="intro" right-icon="arrow-right">
					<u-input v-model="form.intro" placeholder="请选择"/>
				</u-form-item>
				<u-form-item label="面积" prop="intro">
					<u-input v-model="form.intro" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="朝向" prop="intro" right-icon="arrow-right">
					<u-input v-model="form.intro" placeholder="请选择"/>
				</u-form-item>
				<u-form-item label="户型" prop="intro" right-icon="arrow-right">
					<u-input v-model="form.intro" placeholder="请选择"/>
				</u-form-item>
				<u-form-item label="付款方式" prop="intro" right-icon="arrow-right">
					<u-input v-model="form.intro" placeholder="请选择"/>
				</u-form-item>
				<u-form-item label="房屋特色" prop="intro">
					<u-input v-model="form.intro" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="配套设施" prop="intro">
					<u-input v-model="form.intro" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="装修" prop="intro">
					<u-input v-model="form.intro" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="交通" prop="intro">
					<u-input v-model="form.intro" placeholder="请输入"/>
				</u-form-item>
				<u-form-item label="生活" prop="intro" :border-bottom="!1">
					<u-input v-model="form.intro" placeholder="请输入"/>
				</u-form-item>
				<!-- 边线 -->
				<view class="check-box"></view>
				<u-form-item label="称呼" prop="intro">
					<u-input v-model="form.intro" />
				</u-form-item>
				<u-form-item label="联系方式" prop="intro">
					<u-input v-model="form.intro" />
				</u-form-item>
				<u-form-item label="微信/QQ" prop="intro">
					<u-input v-model="form.intro" />
				</u-form-item>
				<view class="tips u-flex">
					<image src="@/pages/agent/static/icon/tips.png"></image>
					<text>提示：如有不方便电话沟通的可以微信或QQ联系</text>
				</view>
			</u-form>
			<u-button shape="circle" type="primary" @click="submit">确认上传</u-button>
		</view>
		<view style="height: 160rpx;"></view>
		
		<!-- 底部安全区适配 -->
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelStyle:{color:'#111',fontWeight:'bold',fontSize:'30rpx'},
				checked1:!0,
				checked2:!1,
				form: {
					name: '',
					intro: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							min: 5, 
							message: '简介不能少于5个字', 
							trigger: 'change'
						}
					]
				}
			}
		},
		methods: {
			submit(){
				
			}
		},
		onReady() {
			// 添加验证规则
			this.$refs.uForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss">
	.content-form{
		padding: 0 42rpx;overflow: hidden;
	}
	/deep/.u-form-item.u-border-bottom{border-bottom: 1rpx solid #ddd;padding: 18rpx 0!important;
		&::after{display: none;}
	}
	.check-box{position: relative;padding: 10rpx 0;
		&::before{content: '';display: block;position: absolute;box-sizing: border-box;border: 10rpx solid #f4f4f4;width: 200%;height: 100%;left: 50%;transform: translateX(-50%);top: 0;z-index: -1;}
	}
	.tips{
		padding: 10rpx 0 80rpx;
		image{width: 24rpx;height: 24rpx;display: block;padding-right: 15rpx;}
		text{font-size: 24rpx;color: #666;}
	}
</style>
